<template>
  <div class="config_preview">
    <!-- 显示配置预览 -->
    <div class="title">显示配置预览</div>
    <b-code-editor 
      v-model="jsonData" 
      ref="editor"
      :indent-unit="4" 
      :smart-indent="true" 
      height="auto" 
      :auto-format="true"
    />
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
import _ from 'lodash';
  export default {
    props: ['display', 'form'],
    data() {
      return {
        jsonData: ''
      }
    },
    watch: {
      jsonData: {
        handler(val){
          this.form.display = {...eval('('+ val +')')}
          this.SET_CHARTS_FORM(eval('('+ val +')'))
        },
        deep: true
      }
    },
    computed: {},
    methods: {
      ...mapMutations('charts', ['SET_CHARTS_FORM']),
      init_line (data) {
        let renderValue = _.cloneDeep(data);
        delete renderValue.animated;
        delete renderValue.label;
        delete renderValue.order;
        delete renderValue.orderBy;
        delete renderValue.roam;
        delete renderValue.unit;
        delete renderValue.visualMap;
        delete renderValue.series[0].radius;
        return renderValue;
      },
      init_pie (data) {
        let renderValue = _.cloneDeep(data);
        delete renderValue.animated;
        delete renderValue.markLine;
        delete renderValue.order;
        delete renderValue.orderBy;
        delete renderValue.roam;
        delete renderValue.unit;
        delete renderValue.visualMap;
        return renderValue;
      },
      init_table (data) {
        let renderValue = _.cloneDeep(data);
        delete renderValue.animated;
        delete renderValue.label;
        delete renderValue.legend;
        delete renderValue.markLine;
        delete renderValue.roam;
        delete renderValue.series;
        delete renderValue.toolbox;
        delete renderValue.unit;
        delete renderValue.visualMap;
        return renderValue;
      },
      init_number (data) {
        let renderValue = _.cloneDeep(data);
        delete renderValue.label;
        delete renderValue.legend;
        delete renderValue.markLine;
        delete renderValue.order;
        delete renderValue.orderBy;
        delete renderValue.roam;
        delete renderValue.series;
        delete renderValue.toolbox;
        delete renderValue.visualMap;
        return renderValue;
      },
      init_map (data) {
        let renderValue = _.cloneDeep(data);
        delete renderValue.animated;
        delete renderValue.label.position;
        delete renderValue.markLine;
        delete renderValue.order;
        delete renderValue.orderBy;
        delete renderValue.series;
        delete renderValue.unit;
        return renderValue;
      },
      init_funnel (data) {
        let renderValue = _.cloneDeep(data);
        delete renderValue.animated;
        delete renderValue.markLine;
        delete renderValue.order;
        delete renderValue.orderBy;
        delete renderValue.roam;
        delete renderValue.series[0].radius;
        delete renderValue.series[0].smooth;
        delete renderValue.series[0].lineStyle;
        delete renderValue.unit;
        delete renderValue.visualMap;
        return renderValue;
      },
      init_path (data) {
        let renderValue = _.cloneDeep(data);
        delete renderValue.label;
        delete renderValue.animated;
        delete renderValue.legend;
        delete renderValue.markLine;
        delete renderValue.order;
        delete renderValue.orderBy;
        delete renderValue.roam;
        delete renderValue.series;
        delete renderValue.toolbox;
        delete renderValue.unit;
        delete renderValue.visualMap;
        return renderValue;
      },
      init_retention(data) {
        let renderValue = _.cloneDeep(data);
        return renderValue;
      },
      init_view () {
        let renderVal = {};
        if (this.form.type == 'line' || this.form.type == 'area' || this.form.type == 'bar' || this.form.type == 'strip' ||  this.form.type == 'group') {
          renderVal = this.init_line(this.form.display);
          if (this.form.type == 'area') {
            renderVal.series[0].areaStyle = {};
          }
          if (this.form.type == 'group') {
            delete renderVal.series[0].lineStyle;
          }
        } else if (this.form.type == 'pie' || this.form.type == 'loop') {
          renderVal = this.init_pie(this.form.display);
        } else if (this.form.type == 'table') {
          renderVal = this.init_table(this.form.display);
        } else if (this.form.type == 'number') {
          renderVal = this.init_number(this.form.display);
        } else if (this.form.type == 'map') {
          renderVal = this.init_map(this.form.display);
        } else if (this.form.type == 'funnel') {
          renderVal = this.init_funnel(this.form.display);
        } else if (this.form.type == 'path') {
          renderVal = this.init_path(this.form.display);
        } else if (this.form.tyoe == 'retention') {
          renderVal = this.init_retention(this.form.display);
        }
        this.jsonData = JSON.stringify(renderVal, null, '\t');
      }
    },
    mounted () {
      this.init_view();
    },
  }
</script>

<style scoped>

.title {
  font-size: 16px;
  font-weight: 500;
  color: rgba(0,0,0,.85);
  margin-bottom: 20px;
}
</style>